<script setup lang="ts">
import TileItem from '@/components/tiles/item/TileItem.vue'
import { Close,Clock } from '@element-plus/icons-vue'

import {onMounted, onUpdated} from 'vue';

const props = defineProps({
  // playCard: {type: Boolean, required: false, default: false},
  buHuaWhenStart: {type: Boolean, required: false, default: false},// 起手补花
  buHua: {type: Boolean, required: false, default: false}, // 普通补花
  chi: {type: Boolean, required: false, default: false}, // 吃
  chiItGroups: {type: Array<Array<string>>, required: false, default: new Array<Array<string>>()},
  it: {type: String, required: false, default: ''},
  peng: {type: Boolean, required: false, default: false}, // 碰
  gangIt: {type: Boolean, required: false, default: false}, // 杠某张打出的牌
  mingGangTilesAfterGrabbing: {type: Array<string>, required: false, default: new Array<string>()},// 抓牌之后明杠某张牌
  // huaAnGang: {type: Boolean, required: false, default: false}, // 花暗杠
  anGang: {type: Boolean, required: false, default: false}, // 暗杠
  anGangTiles: {type: Array<string>,required: false, default: new Array<string>()},// 可以暗杠的牌组
  dianPao: {type: Boolean, required: false, default: false},// 点炮胡
  ziMo: {type: Boolean, required:false, default: false} // 自摸胡
})

const emit = defineEmits<{
  (e: 'handleBuHuaWhenStart'): void,
  (e: 'handleChi', it: string, tiles: Array<string>) : void,
  (e: 'handleGiveUp') : void,
  (e: 'handlePeng', tile:string):void,
  (e: 'handleGangIt', tile:string):void,
  // (e: 'huaAnGang', type:string):void
  (e: 'handleAnGang', tile:string):void,
  (e: 'handleDianPao', tile:string):void,
  (e: 'handleZiMo'):void,
  (e: 'handleMingGangTilesAfterGrabbing', tile:string):void
}>()

function handleBuHuaWhenStart() {
  emit("handleBuHuaWhenStart");
}

// 选择吃牌
function handleChi(tiles:Array<string>) {
  emit("handleChi", props.it, tiles);
}

// 放弃选择
function handleGiveUp() {
  emit('handleGiveUp');
}

function handlePeng(tile:string) {
  emit('handlePeng', tile)
}

function handleGangIt(tile:string) {
  emit('handleGangIt', tile)
}

// function huaAnGang(type:string) {
//   emit('huaAnGang', type)
// }

function handleAnGang(tile:string) {
  emit('handleAnGang', tile);
}

function handleDianPao(tile:string) {
  emit('handleDianPao', tile)
}

function handleZiMo() {
  emit('handleZiMo')
}

function handleMingGangTilesAfterGrabbing(tile:string) {
  emit('handleMingGangTilesAfterGrabbing', tile);
}
</script>
<template>
  <div class="operation-btns-wrap">
    <!-- <div class="operation-timeout-clock">
      <span class="operation-timeout-clock-time">10</span>
      <el-icon :size="50" color="#fdf6ec"><Clock /></el-icon>
    </div> -->
    <el-button class="btn-operation" size="large" v-if="props.buHuaWhenStart" @click="handleBuHuaWhenStart">
      起手补花
    </el-button>
    <!-- <el-button class="btn-operation" size="large" v-if="props.playCard">
      出牌
    </el-button> -->
    <!-- <el-button class="btn-operation" size="large" v-if="props.buHua">
      补花
    </el-button> -->
    <el-popover
      placement="top"
      width="auto"
      trigger="hover"
      popper-class="chi-it-group-pop"
    >
      <template #reference>
        <el-button class="btn-operation" size="large" v-if="props.chi">
          吃
        </el-button>
      </template>
      <div class="chi-it-groups-wrap">
        <div class="chi-it-group" v-for="(tiles, index) in chiItGroups" :key="tiles[0] + index" @click="handleChi(tiles)">
          <TileItem v-for="(tile, tindex) in tiles" :showTagLeftTop="it == tile" tagLeftTopText="吃" tagLeftTopBackgroundColor="#F56C6C" tagLeftTopFontColor="white" :key="tile + tindex" :code="tile"/>
        </div>
      </div>
    </el-popover>

    <el-button class="btn-operation" size="large" v-if="props.peng" @click="handlePeng(it)">
      碰
    </el-button>
    <el-button class="btn-operation" size="large" v-if="props.gangIt" @click="handleGangIt(it)">
      杠
    </el-button>
    <el-popover
      placement="top"
      width="auto"
      trigger="hover"
      popper-class="an-gang-tiles-pop"
    >
      <template #reference>
      <el-button class="btn-operation" size="large" v-if="props.mingGangTilesAfterGrabbing && props.mingGangTilesAfterGrabbing.length > 0" @click="handleGangIt(it)">
        杠
      </el-button>
      </template>
      <div class="an-gang-tiles-wrap">
        <div class="an-gang-tile" v-for="(tile, index) in props.mingGangTilesAfterGrabbing" :key="tile + index" @click="handleMingGangTilesAfterGrabbing(tile)">
          <TileItem :code="tile"/>
        </div>
      </div>
    </el-popover>
    
    <!-- <el-button class="btn-operation" size="large" v-if="props.huaAnGang" @click="huaAnGang()">
      花暗杠
    </el-button> -->
    <el-popover
      placement="top"
      width="auto"
      trigger="hover"
      popper-class="an-gang-tiles-pop"
    >
      <template #reference>
        <el-button class="btn-operation" size="large" v-if="props.anGang">
          暗杠
        </el-button>
      </template>
      <div class="an-gang-tiles-wrap">
        <div class="an-gang-tile" v-for="(tile, index) in props.anGangTiles" :key="tile + index" @click="handleAnGang(tile)">
          <TileItem :code="tile"/>
        </div>
      </div>
    </el-popover>
    <el-button class="btn-operation" size="large" v-if="props.dianPao" @click="handleDianPao(it)">
      胡
    </el-button>
    <el-button class="btn-operation" size="large" v-if="props.ziMo" @click="handleZiMo">
      胡
    </el-button>
    <el-popover
      placement="top"
      width="auto"
      trigger="hover"
      content="放弃"
      popper-class="btn-give-up-wrap"
    >
    <template #reference>
      <el-button class="btn-operation" type="danger" @click="handleGiveUp" circle v-if="props.chi || props.peng || props.gangIt || props.anGang || props.dianPao || props.ziMo">
        <el-icon :size="15"><Close /></el-icon>
      </el-button>
    </template>
  </el-popover>
    
  </div>
</template>
<style scoped lang="scss">
.operation-btns-wrap {
  position: fixed;
  z-index: 5000;
  display: flex;
  flex-direction: row;
  align-items: center;
  .operation-timeout-clock{
    display: flex;
    align-items: center;
    margin-right: 10px;
    background-color: #E6A23C;
    border-radius: 10px;
    .operation-timeout-clock-time{
      font-size: 40px;
      color: #ecf5ff;
      font-weight: bold;
      margin-right: 5px;
    }
  }
}
.chi-it-groups-wrap{
  .chi-it-group{
    display: flex;
    flex-direction: row;
    padding: 10px;
    border-radius: 4px;
    &:hover{
      background-color:  #79bbff;
    }
    .tile-item:not(:first-child) {
      margin-left: 2px;
    }
  }
}

.an-gang-tiles-wrap{
  .an-gang-tile {
    padding: 10px;
    border-radius: 4px;
    &:hover{
      background-color:  #79bbff;
    }
  }
}
</style>
<style lang="scss">
.an-gang-tiles-pop{
  padding: 0px !important;
  border: 0px !important;
}
.chi-it-group-pop{
  padding: 0px !important;
  border: 0px !important;
}
.btn-give-up-wrap{
  min-width: 0 !important;
  background-color: #E6A23C !important;
  border: 0 !important;
  color: white !important;
  font-weight: bold;
  .el-popper__arrow::before{
    background-color: #E6A23C !important;
  }
}

</style>